<div fxLayout="column" fxLayoutAlign="start center" style="height: 100%" class="mat-app-background">
  <img [src]="profile.me.picture"
      matRipple
      alt="Your Picture"
      class="profile-avatar"
  >

  <button mat-raised-button color="accent"
    fxFlexOffset="30px"
    *ngIf="profile.privilege.classControl && !profile.started"
    (click)="startClass()">
    {{i18n.lang.start}}
  </button>

  <button mat-raised-button color="accent"
    fxFlexOffset="30px"
    (click)="stopClass()"
    *ngIf="profile.privilege.classControl && profile.started">
    {{i18n.lang.stop}}
  </button>

  <button mat-raised-button color="accent"
    [matTooltip]="i18n.lang.startConnectVideo"
    *ngIf="profile.privilege.connectVideo && profile.me.connectVideoStatus==='null'"
    [disabled]="!profile.started"
    fxFlexOffset="30px"
    (click)="requestConnectVideo()">
    {{i18n.lang.startConnectVideo}}
  </button>

  <button mat-icon-button color="accent"
    [matTooltip]="i18n.lang.waitForAccept"
    *ngIf="profile.privilege.connectVideo && profile.me.connectVideoStatus==='requested'"
    fxFlexOffset="30px">
    <mat-icon [matBadge]="requestConnectTimeout" matBadgeColor="warn">swap_horiz</mat-icon>
  </button>

  <button mat-raised-button color="accent"
    [matTooltip]="i18n.lang.stopConnectVideo"
    *ngIf="profile.privilege.connectVideo && profile.me.connectVideoStatus ==='connected'"
    fxFlexOffset="30px" (click)="stopConnectVideo()">
    {{i18n.lang.stopConnectVideo}}
  </button>

  <span *ngIf="profile.started"
    color="primary"
    fxFlexOffset="5px">{{timeElapsed}}</span>

  <div fxFlex></div>
  <button mat-icon-button
    [matTooltip]="i18n.lang.closeCamera"
    *ngIf="profile.me.connectVideoStatus==='connected' && profile.me.enableCam"
    fxFlexOffset="15px"
    (click)="peer.pauseLocalCamera()"
    color="accent">
    <mat-icon>videocam</mat-icon>
  </button>

  <button mat-icon-button
    [matTooltip]="i18n.lang.openCamera"
    *ngIf="profile.me.connectVideoStatus==='connected' && !profile.me.enableCam"
    fxFlexOffset="15px"
    (click)="peer.resumeLocalCamera()"
    color="accent">
    <mat-icon>videocam_off</mat-icon>
  </button>

  <button mat-icon-button
    [matTooltip]="i18n.lang.closeMic"
    *ngIf="profile.me.connectVideoStatus==='connected' && profile.me.enableMic"
    fxFlexOffset="15px"
    (click)="peer.pauseLocalMic()"
    color="accent">
    <mat-icon>mic</mat-icon>
  </button>

  <button mat-icon-button
    [matTooltip]="i18n.lang.openMic"
    *ngIf="profile.me.connectVideoStatus==='connected' && !profile.me.enableMic"
    fxFlexOffset="15px"
    (click)="peer.resumeLocalMic()"
    color="accent">
    <mat-icon>mic_off</mat-icon>
  </button>

  <button mat-icon-button color="accent" [matTooltip]="i18n.lang.shareScreen"
    *ngIf="profile.privilege.shareDesktop && !peer.pScreen"
    [disabled]="!profile.started"
    fxFlexOffset="15px" (click)="peer.startScreenShare()">
    <mat-icon>cast</mat-icon>
  </button>
  <button mat-icon-button color="accent" [matTooltip]="i18n.lang.stopShareScreen"
    *ngIf="profile.privilege.shareDesktop && peer.pScreen"
    [disabled]="!profile.started"
    fxFlexOffset="15px" (click)="peer.stopScreenShare()">
    <mat-icon>tv_off</mat-icon>
  </button>
  <button mat-icon-button color="accent" [matTooltip]="i18n.lang.shareMedia" fxFlexOffset="15px"
    *ngIf="profile.privilege.shareMedia"
    [disabled]="!profile.started"
    (click)="shareMedia()">
    <mat-icon>shop_two</mat-icon>
  </button>
  <button mat-icon-button color="accent" fxFlexOffset="15px"
    (click)="startRecordMedia()"
    [disabled]="!recorderEnable"
    [matTooltip]="i18n.lang.recordMainCamera"
    *ngIf="!recorderStart && profile.privilege.classControl"
    >
    <mat-icon>fiber_manual_record</mat-icon>
  </button>
  <button mat-icon-button fxFlexOffset="15px"
    (click)="stopRecordMedia()"
    [matTooltip]="i18n.lang.stopRecording"
    [color]="recordingIconSize?'':'accent'"
    *ngIf="recorderStart">
    <mat-icon>radio_button_checked</mat-icon>
  </button>
  <button mat-icon-button color="accent" fxFlexOffset="15px"
    *ngIf="!bFullscreen"
    [matTooltip]="i18n.lang.openFullscreen"
    (click)="enterFullscreen()">
    <mat-icon>fullscreen</mat-icon>
  </button>
  <button mat-icon-button color="accent" fxFlexOffset="15px"
    [matTooltip]="i18n.lang.exitFullscreen"
    *ngIf="bFullscreen"
    (click)="exitFullscreen()">
    <mat-icon>fullscreen_exit</mat-icon>
  </button>
  <button mat-icon-button color="accent" fxFlexOffset="15px"
    [matTooltip]="i18n.lang.toggleVideoNav"
    (click)="toggleVideoNav()">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-icon-button color="accent"
    [matTooltip]="i18n.lang.setting"
    (click)="openSettingDialog()"
    fxFlexOffset="15px">
    <mat-icon>settings_applications</mat-icon>
  </button>
  <div style="height: 20px"></div>
</div>
